<template>
  <div class="exhibit-registration">
    <div
      class="page-header"
      :style="bannerImage ? { backgroundImage: `url(${bannerImage})` } : {}"
      :class="{ 'has-bg': !!bannerImage }"
    >
      <div class="container">
        <h1 class="page-title">参展报名</h1>
        <p class="page-subtitle">FAIR plus机器人全产业链接会参展报名</p>
      </div>
    </div>
    <!-- 导航菜单 -->
    <div class="nav-menu">
      <div class="container">
        <nav class="about-nav">
          <a
            @click="setActiveTab('why-exhibit')"
            :class="['nav-item', { active: activeTab === 'why-exhibit' }]"
          >
            为何参展
          </a>
          <a
            @click="setActiveTab('who-exhibits')"
            :class="['nav-item', { active: activeTab === 'who-exhibits' }]"
          >
            谁来观展
          </a>
          <a
            @click="setActiveTab('exhibit-registration')"
            :class="[
              'nav-item',
              { active: activeTab === 'exhibit-registration' },
            ]"
          >
            参展报名
          </a>
          <!-- <a @click="setActiveTab('exhibitor-system')" 
             :class="['nav-item', { active: activeTab === 'exhibitor-system' }]">
            展商系统
          </a> -->
          <a
            @click="setActiveTab('exhibitor-services')"
            :class="[
              'nav-item',
              { active: activeTab === 'exhibitor-services' },
            ]"
          >
            展商服务
          </a>
          <a
            @click="setActiveTab('exhibitor-reviews')"
            :class="['nav-item', { active: activeTab === 'exhibitor-reviews' }]"
          >
            展商评语
          </a>
        </nav>
      </div>
    </div>

    <div class="container">
      <section class="registration-section">
        <!-- <h2 class="section-title">参展报名</h2> -->
        <div class="registration-content">
          <div class="registration-intro">
            <h3>参展优势</h3>
            <p>参加FAIR plus机器人全产业链接会，您将获得：</p>
            <div class="advantages-grid">
              <div
                class="advantage-item"
                v-for="advantage in advantages"
                :key="advantage.id"
              >
                <div class="advantage-icon">
                  <el-icon
                    ><component :is="getIconComponent(advantage.icon)"
                  /></el-icon>
                </div>
                <div class="advantage-info">
                  <h4>{{ advantage.title }}</h4>
                  <p>{{ advantage.description }}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="registration-form">
            <h3>参展报名表</h3>
            <form @submit.prevent="submitRegistration" class="exhibit-form">
              <div class="form-section">
                <h4>基本信息</h4>
                <div class="form-group">
                  <label for="company">公司 *</label>
                  <input
                    type="text"
                    id="company"
                    v-model="registrationForm.company"
                    required
                  />
                </div>
                <div class="form-group">
                  <label for="address">地址 *</label>
                  <input
                    type="text"
                    id="address"
                    v-model="registrationForm.address"
                    required
                  />
                </div>
                <div class="form-group">
                  <label for="contactName">联系人 *</label>
                  <input
                    type="text"
                    id="contactName"
                    v-model="registrationForm.contactName"
                    required
                  />
                </div>
                <div class="form-group">
                  <label for="phone">联系方式 *</label>
                  <input
                    type="tel"
                    id="phone"
                    v-model="registrationForm.phone"
                    required
                  />
                </div>
                <div class="form-group">
                  <label for="position">职务 *</label>
                  <input
                    type="text"
                    id="position"
                    v-model="registrationForm.position"
                    required
                  />
                </div>
                <div class="form-group">
                  <label for="productScope">展品范围 *</label>
                  <select
                    id="productScope"
                    v-model="registrationForm.productScope"
                    required
                  >
                    <option value="">请选择展品范围</option>
                    <option value="机器人核心零部件（含成熟和创新产品）">
                      机器人核心零部件（含成熟和创新产品）
                    </option>
                    <option value="大脑相关（人工智能算法及其他）">
                      大脑相关（人工智能算法及其他）
                    </option>
                    <option value="整机研发、设计、系统集成">
                      整机研发、设计、系统集成
                    </option>
                    <option value="机器人检测、维修和保养、测试验证等">
                      机器人检测、维修和保养、测试验证等
                    </option>
                    <option value="机器人生产设备、流水线、代工厂等">
                      机器人生产设备、流水线、代工厂等
                    </option>
                    <option value="其他，请说明">其他，请说明</option>
                  </select>
                </div>
                <div
                  class="form-group"
                  v-if="registrationForm.productScope === '其他，请说明'"
                >
                  <label for="otherProductScope">其他展品范围说明 *</label>
                  <input
                    type="text"
                    id="otherProductScope"
                    v-model="registrationForm.otherProductScope"
                    required
                  />
                </div>
              </div>

              <button type="submit" class="submit-btn">提交参展报名</button>
            </form>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { exhibitorRegistrationApi, subpageApi } from "@/api/user";
import {
  Trophy,
  User,
  Connection,
  Star,
  Document,
  Calendar,
  Location,
  Van,
} from "@element-plus/icons-vue";

export default {
  name: "ExhibitRegistration",
  setup() {
    const activeTab = ref("exhibit-registration");
    const bannerImage = ref("");
    const loadBanner = async () => {
      try {
        const res = await subpageApi.getContentByType("carousel_exhibitors");
        if (
          res &&
          (res.code === "200" || res.code === 200) &&
          Array.isArray(res.data) &&
          res.data.length > 0
        ) {
          const firstActive =
            res.data.find((item) => item.status === "active") || res.data[0];
          bannerImage.value = firstActive.imageUrl || firstActive.image || "";
        }
      } catch (e) {
        bannerImage.value = "";
      }
    };
    // 参展优势数据
    const advantages = ref([
      {
        id: 1,
        title: "品牌曝光",
        description: "在华南地区最具影响力的机器人展会上展示您的品牌和产品",
        icon: "Trophy",
      },
      {
        id: 2,
        title: "精准客户",
        description: "吸引来自全国各地的专业观众和潜在客户",
        icon: "User",
      },
      {
        id: 3,
        title: "行业交流",
        description: "与行业专家、同行企业进行深度交流与合作",
        icon: "Connection",
      },
      {
        id: 4,
        title: "市场洞察",
        description: "了解最新行业趋势和技术发展方向",
        icon: "Star",
      },
    ]);

    // 附加服务选项
    const additionalServices = ref([
      {
        id: "media",
        title: "媒体宣传",
        description: "展会官方媒体宣传和报道",
      },
      {
        id: "logistics",
        title: "物流服务",
        description: "展品运输和现场物流支持",
      },
      {
        id: "translation",
        title: "翻译服务",
        description: "中英文翻译和现场口译",
      },
      {
        id: "catering",
        title: "餐饮服务",
        description: "展位餐饮和接待服务",
      },
    ]);

    // 参展报名表单数据
    const registrationForm = ref({
      company: "",
      address: "",
      contactName: "",
      phone: "",
      position: "",
      productScope: "",
      otherProductScope: "",
    });

    // 获取图标组件
    const getIconComponent = (iconName) => {
      const iconMap = {
        Trophy: Trophy,
        User: User,
        Connection: Connection,
        Star: Star,
        Document: Document,
        Calendar: Calendar,
        Location: Location,
        Van: Van,
      };
      return iconMap[iconName] || Trophy;
    };

    // 提交参展报名
    const submitRegistration = async () => {
      try {
        const payload = {
          company: registrationForm.value.company,
          address: registrationForm.value.address,
          contactName: registrationForm.value.contactName,
          phone: registrationForm.value.phone,
          position: registrationForm.value.position,
          productScope:
            registrationForm.value.productScope === "其他，请说明"
              ? registrationForm.value.otherProductScope
              : registrationForm.value.productScope,
          otherProductScope:
            registrationForm.value.productScope === "其他，请说明"
              ? registrationForm.value.otherProductScope
              : "",
        };
        const response = await exhibitorRegistrationApi.submit(payload);

        if (response && (response.code === "200" || response.code === 200)) {
          ElMessage.success("参展报名提交成功！我们会尽快与您联系确认详情。");

          // 重置表单
          Object.keys(registrationForm.value).forEach((key) => {
            registrationForm.value[key] = "";
          });
        } else {
          ElMessage.error(response?.msg || "参展报名提交失败，请重试");
        }
      } catch (error) {
        console.error("参展报名提交失败:", error);
        ElMessage.error(error.message || "参展报名提交失败，请重试");
      }
    };

    const setActiveTab = (tabKey) => {
      if (!tabKey) return;
      activeTab.value = tabKey;
      // 跳转到对应的子页面
      if (tabKey !== "exhibit-registration") {
        window.location.href = `/${tabKey}`;
      }
    };

    onMounted(() => {
      loadBanner();
    });

    return {
      activeTab,
      bannerImage,
      advantages,
      registrationForm,
      getIconComponent,
      submitRegistration,
      setActiveTab,
    };
  },
};
</script>

<style scoped>
.exhibit-registration {
  min-height: 100vh;
  background: #f8f9fa;
}

.page-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 120px 0 80px 0;
  margin-top: 0;
  text-align: center;
  color: white;
}

.page-header.has-bg {
  height: 400px;
  position: relative;
  background: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-header.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.page-header.has-bg .container {
  position: relative;
  z-index: 1;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.registration-section {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  margin: 2rem 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 2rem;
  text-align: center;
}

.registration-content {
  max-width: 1000px;
  margin: 0 auto;
}

.registration-intro {
  margin-bottom: 3rem;
}

.registration-intro h3 {
  font-size: 1.8rem;
  color: var(--e-global-color-title);
  margin-bottom: 1rem;
}

.registration-intro p {
  color: #666;
  line-height: 1.8;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.advantage-item {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
  border-radius: 15px;
  border: 1px solid #e0e7ff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.advantage-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.advantage-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: linear-gradient(
    135deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}

.advantage-icon .el-icon {
  font-size: 1.2rem;
  color: white;
}

.advantage-info h4 {
  font-size: 1.1rem;
  color: var(--e-global-color-5c1ca3d);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.advantage-info p {
  color: #666;
  line-height: 1.6;
  font-size: 0.9rem;
  margin: 0;
}

.registration-form {
  background: linear-gradient(135deg, #f8f9ff 0%, #e8f0ff 100%);
  border-radius: 15px;
  padding: 2rem;
  border: 1px solid #e0e7ff;
}

.registration-form h3 {
  font-size: 1.5rem;
  color: var(--e-global-color-title);
  margin-bottom: 2rem;
  text-align: center;
}

.exhibit-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.form-section {
  background: white;
  border-radius: 10px;
  padding: 1.5rem;
  border: 1px solid #e0e7ff;
}

.form-section h4 {
  font-size: 1.2rem;
  color: var(--e-global-color-title);
  margin-bottom: 1rem;
  font-weight: 600;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--e-global-color-title);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #e0e7ff;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--e-global-color-selected);
}

.service-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.service-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem;
  background: #f8f9ff;
  border-radius: 8px;
  border: 1px solid #e0e7ff;
}

.service-option input[type="checkbox"] {
  width: auto;
  margin-top: 0.2rem;
}

.service-option label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  cursor: pointer;
  margin: 0;
}

.service-title {
  font-weight: 600;
  color: var(--e-global-color-selected);
  font-size: 0.9rem;
}

.service-description {
  color: #666;
  font-size: 0.8rem;
  line-height: 1.4;
}

.submit-btn {
  background: linear-gradient(
    135deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 100%
  );
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s ease;
  margin-top: 1rem;
}

.submit-btn:hover {
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .registration-section {
    padding: 2rem;
    margin: 1rem 0;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .advantages-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .service-options {
    grid-template-columns: 1fr;
  }

  .registration-form {
    padding: 1.5rem;
  }

  .form-section {
    padding: 1rem;
  }

  .page-title {
    font-size: 2rem;
  }

  .page-subtitle {
    font-size: 1rem;
  }
}

/* 导航菜单样式 - 参考关于我们页面 */
.nav-menu {
  background: #f8f9fa;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.about-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid #eee;
  cursor: pointer;
}

.nav-item:hover {
  background-color: var(--e-global-color-selected);
  color: white;
  border-color: var(--e-global-color-selected);
}

.nav-item.active {
  background-color: var(--e-global-color-selected);
  color: white;
  border-color: var(--e-global-color-selected);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .about-nav {
    gap: 15px;
  }

  .nav-item {
    font-size: 1rem;
    padding: 8px 16px;
  }
}
</style>
